<!--
 * @Author: Jackie
 * @Date: 2020-12-03 11:44:36
 * @FilePath: \vue_demo\vue_mina\src\components\Login.vue
 * @Copyright (C) 2020 Jackie. All rights reserved.
 * @Description: 登录组件
-->
<template>
  <div class="loginContainer">
    <!--左半部-插画部分-->
    <div class="loginIllustration"></div>
    <!--右半部-登录组件-->
    <div class="loginBox">
      <!--右半部-登录组件容器-->
      <div class="loginContent">
        <!--标题-->
        <div class="loginTitle">
          <h3>Welcome to MinaHome</h3>
          <span>~~~~~~~~~~~~~~~~~~~~~~ </span>
        </div>
        <!--登录表单区域-->
        <el-form  
        label-width="0px" 
        ref="loginFormRef" 
        class="loginForm" 
        :model="loginForm" 
        :rules="loginFormRules" 
        >
          <!--用户名-->
          <el-form-item>
              <label>UserAccount</label>
              <el-input placeholder="请输入账号" v-model="loginForm.username"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item>
              <label>Password</label>
              <el-input placeholder="请输入密码" type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <!--按钮-->
          <el-form-item class="btns">
              <el-button type="primary" @click='login'>Sign in</el-button>
              <el-button type="info" @click="resetLoginForm">Reset</el-button>
          </el-form-item>
        </el-form>
      </div>    
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      loginForm:{
        username:"admin",password:"123456"
      },
      //这是表单的验证规则对象
      loginFormRules:{
          username:[
              { required: true, message: '请输入登录用户名/邮箱', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password:[
              { required: true, message: '请输入登录密码', trigger: 'blur' },
              { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ]      
      }
    }
  },
  methods:{
        //点击重置按钮，重置登录表单
        resetLoginForm(){
            this.$refs.loginFormRef.resetFields();
        },
        //登录
        login(){
            this.$refs.loginFormRef.validate(async valid=>{
                if (!valid) return
                const {data:res}=await this.$http.post("login",this.loginForm);
                if(res.meta.status!==200) return this.$message.error("登录失败");
                this.$message.success('登录成功');
                window.sessionStorage.setItem('token',res.data.token)
                this.$router.push("/home")
            });
        }
    }
}
</script>

<style lang="less" scoped>
.loginContainer{
  height: 100%;
  background-color: #fff;
  display: flex;
  .loginIllustration{
    // width: 700px;
    flex: 1;
    height: 100%;
    background-color: #f2c98a;
  }
  .loginBox{
    flex: 2;
    height: 100%;
    display: flex;
    justify-content: center;
      .loginContent{
      width: 500px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .loginTitle{
        text-align: left;
        width: 100%;
        padding: 42.25px 0;
        h3{
        font-size: 2rem!important;
        font-weight: 600!important; 
        margin: 0 0 6.5px
        }
        span{
          display: block;
          font-size: 17.55px;
          color: #b5b5c3;
          font-weight: bolder;
        }
        }
        .loginForm{
          position: relative;
          bottom: 0;
          width: 100%;
          padding: 0 20 0 0px;
          box-sizing: border-box;
        label{
          color: #3f4254; 
          font-weight: bolder;
          font-size: 15.275px;
        }
        .el-input{
        height: 66.5px;
        line-height: 66.5px;
        background-color: #f3f6f9;
        border-color: #f3f6f9;
        border-radius: 10px;
        color: #3f4254;
      }
      .el-input /deep/ .el-input__inner{
        background-color: rgba(#f3f6f9,100%);
        border: none;
      }
      .btns{
        display: flex;
        width: 100%;
        button{
          width: 151.5px;height: 50px;
          padding: 13px 48.75px;
          margin: 10px 10px 10px 0;
          font-size: 15.275px;
          font-weight: bolder;
          
        }
        }
      }
      }
      
      
    }
  } 


</style>>
